<template>
  <div class="header-third">
    <div v-for="(item, index) in envInfoList" :key="index" class="grid-item">
      <!-- 有数据 -->
      <div>
        <div class="grid-title">{{ item.name }}</div>
        <div v-if="true" class="grid-linese">
          <span class="grid-data"> {{ item.value }}</span>
          <span class="grid-unit">{{ item.unit }}</span>
        </div>
        <div v-else>{{ $t("无") }}</div>
        <img :src="item.imgUrl" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    envInfoList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      // envInfoList: [], //页面展示宫格数据
      // 宫格数据
      gridInfo: [
        {
          name: this.$t("甲烷"),
          value: "0.0",
          unit: "%",
          isShow: false,
          imgUrl: require("../../../../assets/images/home/CH4.png"),
        },
        {
          name: this.$t("氧气"),
          value: "35.5",
          unit: "%",
          isShow: false,
          imgUrl: require("../../../../assets/images/home/O2.png"),
        },
        {
          name: this.$t("温度"),
          value: "22.1",
          unit: "℃",
          isShow: false,
          imgUrl: require("../../../../assets/images/home/wd.png"),
        },
        {
          name: this.$t("烟雾"),
          value: "无",
          unit: "",
          isShow: false,
          imgUrl: require("../../../../assets/images/home/smoke.png"),
        },
        {
          name: "PM2.5",
          value: "0",
          unit: "ug/m³",
          isShow: false,
          imgUrl: require("../../../../assets/images/home/PM.png"),
        },
        {
          name: this.$t("一氧化碳"),
          value: "0",
          unit: "ppm",
          isShow: false,
          imgUrl: require("../../../../assets/images/home/CO.png"),
        },
        {
          name: this.$t("二氧化氢"),
          value: "0",
          unit: "ppm",
          isShow: false,
          imgUrl: require("../../../../assets/images/home/H2O2.png"),
        },
        {
          name: this.$t("湿度"),
          value: "35.5",
          unit: "%",
          isShow: false,
          imgUrl: require("../../../../assets/images/home/sd.png"),
        },
        {
          name: "PM1.0",
          value: "0",
          unit: "ug/m³",
          isShow: false,
          imgUrl: require("../../../../assets/images/home/PM.png"),
        },
        {
          name: "PM10",
          value: "0",
          unit: "ug/m³",
          isShow: false,
          imgUrl: require("../../../../assets/images/home/PM.png"),
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
// 宫格
.header-third {
  height: 184px;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
  padding: 5px 0 0 5px;
  box-sizing: border-box;
  background: url("../../../../assets/images/home/grid-bgi.png") no-repeat
    center center;
  background-size: 100% 100%;
  .grid-item {
    display: flex;
    justify-content: center;
    position: relative;
    width: 20%;
    height: 92px;
    //控制定位图之后盒子高度
    padding-bottom: 30px;
    box-sizing: border-box;
    img {
      position: absolute;
      width: 24px;
      height: 24px;
      right: 10px;
      bottom: 10px;
    }
    .grid-title {
      margin-top: 5px;
      opacity: 0.8;
      font-size: 12px;
    }
    .grid-linese {
      span {
        display: block;
      }
      .grid-data {
        font-weight: bold;
        font-size: 18px;
      }
      .grid-unit {
        font-size: 12px;
      }
    }
  }
}
</style>
